﻿@page "/line"
@using VectSharp;
@using VectSharp.SVG;

<style>
	table {
		table-layout: fixed;
	}

	td {
		width: 200px;
		padding: 10px;
	}
</style>

<div style="width: 100vw; height: 100vh; position: relative;">
	<div style="width: calc(100% - 400px); height: 100%; position: absolute; top: 0; left: 0; text-align: center">
		<img src="@imgSource" style="max-width: 100%; max-height: 100%; margin-top: 50vh; transform: translate(0, -50%)" />
	</div>

	<div style="width: 400px; height: 100vh; position: absolute; top: 0; right: 0;">
		<table style="margin-top: 50vh; transform: translate(0, -50%)">
			<tr>
				<td>
					<MatNumericUpDownField Label="P1.X"
										   @bind-Value=@p1X
										   Step="1">
					</MatNumericUpDownField>
				</td>
				<td>
					<MatNumericUpDownField Label="P1.Y"
										   @bind-Value=@p1Y
										   Step="1">
					</MatNumericUpDownField>
				</td>
			</tr>
			<tr>
				<td>
					<MatNumericUpDownField Label="P2.X"
										   @bind-Value=@p2X
										   Step="1">
					</MatNumericUpDownField>
				</td>
				<td>
					<MatNumericUpDownField Label="P2.Y"
										   @bind-Value=@p2Y
										   Step="1">
					</MatNumericUpDownField>
				</td>
			</tr>

		</table>
	</div>
</div>

@code {
	private double _p1X = 20;
	private double p1X
	{
		get
		{
			return _p1X;
		}

		set
		{
			_p1X = value;
			Render();
		}
	}

	private double _p1Y = 30;
	private double p1Y
	{
		get
		{
			return _p1Y;
		}

		set
		{
			_p1Y = value;
			Render();
		}
	}

	private double _p2X = 80;
	private double p2X
	{
		get
		{
			return _p2X;
		}

		set
		{
			_p2X = value;
			Render();
		}
	}

	private double _p2Y = 70;
	private double p2Y
	{
		get
		{
			return _p2Y;
		}

		set
		{
			_p2Y = value;
			Render();
		}
	}



	private string imgSource = "";

	protected override Task OnInitializedAsync()
	{
		Render();
		return Task.CompletedTask;
	}

	public void Render()
	{
		Page page = new Page(100, 100);
		Graphics graphics = page.Graphics;

		IEnumerable<FormattedText> p1 = FormattedText.Format("P<sub>1</sub>", FontFamily.StandardFontFamilies.Helvetica, 10);
		Font.DetailedFontMetrics metrics1 = p1.Measure();

		IEnumerable<FormattedText> p2 = FormattedText.Format("P<sub>2</sub>", FontFamily.StandardFontFamilies.Helvetica, 10);
		Font.DetailedFontMetrics metrics2 = p2.Measure();

		Point direction = new Point(p2X - p1X, p2Y - p1Y);
		double modulus = direction.Modulus();
		direction = new Point(direction.X / modulus, direction.Y / modulus);

		double centerP1X = p1X - direction.X * 10;
		double centerP1Y = p1Y - direction.Y * 10;

		double centerP2X = p2X + direction.X * 10;
		double centerP2Y = p2Y + direction.Y * 10;

		graphics.FillText(centerP1X - metrics1.Width * 0.5, centerP1Y, p1, Colours.Black, TextBaselines.Middle);
		graphics.FillText(centerP2X - metrics2.Width * 0.5, centerP2Y, p2, Colours.Black, TextBaselines.Middle);

		graphics.StrokePath(new GraphicsPath().MoveTo(p1X, p1Y).LineTo(p2X, p2Y), Colours.Black, 2);

		using (MemoryStream ms = new MemoryStream())
		{
			page.SaveAsSVG(ms);
			ms.Seek(0, SeekOrigin.Begin);

			using (StreamReader sr = new StreamReader(ms))
			{
				this.imgSource = "data:image/svg+xml;base64," + Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(sr.ReadToEnd()));
			}
		}
	}
}
